/**
 * Created by saucxs on 2019/3/1.
 */

function CaptchaMini(params = {}) {
  let middleParams = Object.assign({
    lineWidth: 0.5, //线条宽度
    lineNum: 2, //线条数量
    dotR: 1, //点的半径
    dotNum: 15, //点的数量
    preGroundColor: [10, 80], //前景色区间
    backGroundColor: [150, 250], //背景色区间
    fontSize: 20, //字体大小
    fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'], //字体类型
    fontStyle: 'fill', //字体绘制方法，有fill和stroke
    content: 'acdefhijkmnpwxyABCDEFGHJKMNPQWXY12345789', //验证码内容
    length: 4 //验证码长度
  }, params);
  Object.keys(middleParams).forEach(item => {
    this[item] = middleParams[item];
  });
  this.canvas = null;
  this.paint = null;
};

/*Captcha的原型上绑定方法
 * 获取区间的随机数
 * params []*/
CaptchaMini.prototype.getRandom = function (...arr) {
  arr.sort((a, b) => a - b);
  return Math.floor(Math.random() * (arr[1] - arr[0]) + arr[0]);
};

/*Captcha的原型上绑定方法
 * 获取随机颜色
 * params []*/
CaptchaMini.prototype.getColor = function (arr) {
  let colors = new Array(3).fill('');
  colors = colors.map(item => this.getRandom(...arr));
  return colors
};

/*Captcha的原型上绑定方法
 * 获取验证码*/
CaptchaMini.prototype.getText = function () {
  let length = this.content.length;
  let str = '';
  for (let i = 0; i < this.length; i++) {
    str += this.content[this.getRandom(0, length)];
  }
  return str;
};

/*Captcha的原型上绑定方法
 * 绘制线条*/
CaptchaMini.prototype.line = function () {
  for (let i = 0; i < this.lineNum; i++) {
    /*随机获取线条的起始位置*/
    let x = this.getRandom(0, this.canvas.width);
    let y = this.getRandom(0, this.canvas.height);
    let endX = this.getRandom(0, this.canvas.width);
    let endY = this.getRandom(0, this.canvas.height);

    this.paint.beginPath();
    this.paint.lineWidth = this.lineWidth;

    /*获取颜色路径*/
    let colors = this.getColor(this.preGroundColor);
    this.paint.strokeStyle = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';

    /*绘制路径*/
    this.paint.moveTo(x, y);
    this.paint.lineTo(endX, endY);
    this.paint.closePath();
    this.paint.stroke();
  }
};

/*Captcha的原型上绑定方法
 * 绘制圆点*/
CaptchaMini.prototype.circle = function () {
  for (let i = 0; i < this.dotNum; i++) {
    /*随机获取圆心*/
    let x = this.getRandom(0, this.canvas.width);
    let y = this.getRandom(0, this.canvas.height);
    this.paint.beginPath();
    /*绘制圆*/
    this.paint.arc(x, y, this.dotR, 0, Math.PI * 2, false);
    this.paint.closePath();
    /*随机获取路径颜色*/
    let colors = this.getColor(this.preGroundColor);
    this.paint.fillStyle = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';
    /*绘制*/
    this.paint.fill();
  }
};


/*Captcha的原型上绑定方法
 * 绘制文字*/
CaptchaMini.prototype.font = function () {
  let str = this.getText();
  this.callback(str);
  /*指定文字风格*/
  this.paint.font = this.fontSize + 'px ' + this.fontFamily[this.getRandom(0, this.fontFamily.length)];
  this.paint.textBaseline = 'middle';
  /*指定文字绘制风格*/
  let fontStyle = this.fontStyle + 'Text';
  let colorStyle = this.fontStyle + 'Style';
  for (let i = 0; i < this.length; i++) {
    let fontWidth = this.paint.measureText(str[i]).width;
    let x = this.getRandom(this.canvas.width / this.length * i + 0.2 * fontWidth, (this.canvas.width / this.length) * i + 0.5 * fontWidth);
    /*随机获取字体的旋转角度*/
    let deg = this.getRandom(-6, 6);
    /*随机获取文字颜色*/
    let colors = this.getColor(this.preGroundColor);
    this.paint[colorStyle] = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';
    /*开始绘制*/
    this.paint.save();
    this.paint.rotate(deg * Math.PI / 180);
    this.paint[fontStyle](str[i], x, this.canvas.height / 2);
    this.paint.restore();

  }
};

/*Captcha的原型上绑定方法
 * 绘制图形*/
CaptchaMini.prototype.draw = function (dom, callback = function () {}) {
  /*获取canvas的dom*/
  if (!this.paint) {
    this.canvas = dom;
    if (!this.canvas) return;
    else this.paint = this.canvas.getContext('2d');
    /*回调函数赋值给this*/
    this.callback = callback;
    this.canvas.onclick = () => {
      this.drawAgain();
    }
  }
  /*随机画布颜色，使用背景色*/
  let colors = this.getColor(this.backGroundColor);
  this.paint.fillStyle = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';

  /*绘制画布*/
  this.paint.fillRect(0, 0, this.canvas.width, this.canvas.height);

  /*绘图*/
  this.circle();
  this.line();
  this.font();
};

/*Captcha的原型上绑定方法
 * 清空画布*/
CaptchaMini.prototype.clear = function () {
  this.paint.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

/*Captcha的原型上绑定方法
 * 重新绘制*/
CaptchaMini.prototype.drawAgain = function () {
  this.clear();
  this.draw(this.callbak);
};

if (typeof module !== 'undefined' && !module.nodeType && module.exports) {
  module.exports = CaptchaMini;
}

// 挂在window上
window.CaptchaMini = CaptchaMini